<template>
  <div>
    <div class="sidebar_box">
      <div class="user_info">
        <h1 class="user_name">1074321111</h1>
        <p class="user_type">移动通行证用户</p>
        <div class="store_ratio">
          <canvas id="cas"></canvas>
        </div>
      </div>
      <div class="menu">
        <div class="tohome" @click="ToHomepage()"></div>
        <ul>
          <li>
            <a href="javascript:void(0)" class="clearfix">
              <div class="h_page pic fl"><b></b></div>
              <div class="menu-title fl">首页</div>
            </a>
          </li>
          <li>
            <router-link to="/homepage" class="clearfix">
              <div class="client pic fl"><b></b></div>
              <div class="menu-title fl">客户端下载</div>
            </router-link>
          </li>
          <li>
            <router-link to="/homepage" class="clearfix">
              <div class="email pic fl"><b></b></div>
              <div class="menu-title fl">139邮箱</div>
            </router-link>
          </li>
          <li>
            <router-link to="/homepage" class="clearfix">
              <div class="exit pic fl"><b></b></div>
              <div class="menu-title fl">退出登录</div>
            </router-link>
          </li>
        </ul>
      </div>
    </div>
    <div class="header">
      <div class="sidebar" @click="sidebarIsHide()"></div>
      <h1 class="title">和彩云</h1>
      <div class="upload">
        <input type="file" mutiple @change="upload($event)" id="uploadfile">
        <!--<file-upload></file-upload>-->
      </div>
    </div>
  </div>
</template>
<script>
  import $ from 'jquery'

  export default {
    data () {
      return {}
    },
    mounted () {
      $('.sidebar_box').height($('body').height()).css({minHeight: $(window).innerHeight()})
      this.strokeCircle(0.58)
    },
    methods: {
      sidebarIsHide () {
        $('.layout').toggleClass('sidebar_move')
      },

      strokeCircle (percent) {
        var ctx = $('#cas')[0].getContext('2d')

        // 将最小值限制在0.001 保证高亮的圆环能够显示一点点
        percent = percent <= 0.001 ? 0.001 : percent

        // 设置canvas画布的宽高
        $('#cas').width('4.35rem').height('2.18rem')

        // 画底线
        ctx.beginPath()
        ctx.arc(150, 94, 75, -Math.PI, 0)
        ctx.strokeStyle = '#212d4e'
        ctx.lineWidth = 10
        ctx.stroke()
        ctx.closePath()

        // 画发光的线
        ctx.beginPath()
        ctx.arc(150, 94, 75, -Math.PI, -(1 - percent) * Math.PI)
        ctx.strokeStyle = '#6df9ff'
        ctx.lineCap = 'round' // 设置圆环末端线帽的样式 round：圆环  square：正方形   butt平直
        ctx.lineWidth = 10 // 圆环的宽度
        ctx.shadowBlur = 20 // 设置阴影大小
        ctx.shadowColor = '#6df9ff' // 设置阴影颜色
        ctx.stroke()
        ctx.closePath()

        // 绘制填充的文字
        ctx.beginPath()
        ctx.font = '16px Arial' // 文字的样式
        ctx.fillStyle = '#fff' // 文字的颜色
        ctx.shadowBlur = 0
        ctx.textAlign = 'center' // 文字以下面的坐标水平居中
        ctx.fillText('215.2G/1024G', 150, 75) // 文字内容和坐标
        ctx.closePath()
      },

      ToHomepage () {
        if (this.$route.path === '/homepage') {
          $('.layout').toggleClass('sidebar_move')
        } else {
          window.location.href = '#/homepage'
        }
      },

      // 上传文件
      upload (e) {
        this.formData = new FormData()
        this.formData.append('file', e.target.files[0])
        console.log(this.formData.get('file'))
        $.ajax({
          url: '/fileupload.php',  // 这里是后台接口需要换掉
          type: 'POST',
          dataType: 'json',
          cache: false,
          data: this.formData,
          processData: false,
          contentType: false,
          success: (res) => {
            if (res.code === 200) {
              alert('上传成功')
            }
          },
          error (err) {
            alert('网络错误')
            console.log(err)
          },
          xhr: function () {
            var myXhr = $.ajaxSettings.xhr()
            if (myXhr.upload) {
              myXhr.upload.addEventListener('progress', function (e) {
                if (e.lengthComputable) {
                  var percent = Math.floor(e.loaded / e.total * 100)
                  if (percent <= 100) {
                    // onuploading somecodes
                    console.log(percent)
                  }
                  if (percent >= 100) {
                    // uploaded somecodes
                    console.log('上传成功')
                  }
                }
              }, false)
            }
          }
        })
      }
    }
  }
</script>
<style scoped>
  .sidebar_box {
    width: 4.35rem;
    background-color: #19223b;
    position: fixed;
    top: 0;
    left: -4.35rem;
  }

  .user_info {
    width: 100%;
    height: 2.54rem;
    padding-top: 0.2rem;
    position: relative;
  }

  .user_info .user_name {
    color: #fff;
    font-size: 0.32rem;
    text-align: center;
    line-height: 0.5rem;
  }

  .user_info .user_type {
    color: #cdcdcd;
    text-align: center;
    font-size: 0.32rem;
  }

  .menu {
    background-color: #212d4f;
    width: 100%;
    position: relative;
  }

  .menu .tohome {
    position: absolute;
    width: 100%;
    height: 1rem;
    top: 0;
    left: 0;
    z-index: 999;
  }

  .menu li {
    width: 100%;
    height: 1.02rem;
    border-bottom: 1px solid #19223b;
    border-top: 1px solid #424c69;
  }

  .menu li a {
    display: block;
    width: 100%;
    height: 100%;
    font-size: 0.32rem;
    color: #fff;
  }

  .menu li a .pic {
    width: 0.9rem;
    height: 100%;
    position: relative;
  }

  .menu li a .menu-title {
    width: 3.45rem;
    height: 1.02rem;
    line-height: 1.02rem;
  }

  .menu li a .h_page b {
    width: 0.38rem;
    height: 0.34rem;
    background: url('../../assets/images/sprite.png') no-repeat -0.02rem -0.02rem;
  }

  .menu li a .client b {
    width: 0.28rem;
    height: 0.36rem;
    background: url('../../assets/images/sprite.png') no-repeat -1.17rem -0.05rem;
  }

  .menu li a .email b {
    width: 0.34rem;
    height: 0.26rem;
    background: url('../../assets/images/sprite.png') no-repeat -0.58rem -0.05rem;
  }

  .menu li a .exit b {
    width: 0.32rem;
    height: 0.32rem;
    background: url('../../assets/images/sprite.png') no-repeat -1.62rem -0.15rem;
  }

  .menu li a .pic b {
    background-size: 10rem 6rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  /* 头部 */
  .header {
    width: 100%;
    height: 0.9rem;
    background-color: #5E88FF;
    position: relative;
  }

  .header .title {
    width: 100%;
    height: 100%;
    line-height: 0.9rem;
    text-align: center;
    font-size: 0.36rem;
    color: #fff;
    font-weight: 500;
  }

  .header .sidebar {
    width: 0.38rem;
    height: 0.3rem;
    position: absolute;
    top: 0.3rem;
    left: 0.26rem;
    background: url('../../assets/images/sprite.png') no-repeat -1.02rem -1.49rem;
    background-size: 10rem 6rem;
  }

  .header .upload {
    width: 0.46rem;
    height: 0.36rem;
    position: absolute;
    top: 0.27rem;
    right: 0.3rem;
    background: url('../../assets/images/sprite.png') no-repeat -0.26rem -1.39rem;
    background-size: 10rem 6rem;
  }

  .header .upload input {
    display: block;
    width: 100%;
    height: 100%;
    opacity: 0;
  }
</style>
